<!--
 * @Author: QUAN
 * @Date: 2021-11-17 15:40:15
 * @LastEditTime: 2021-12-06 16:45:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \mutong-jimu-h5-activity\src\components\Comment.vue
-->
<template>
  <div class="comment">
    <!-- 仅供展示的评论框 -->
    <div class="input-comment" @click="startComment('')">
      <span>发表评论</span>
      <div class="input-comment-right">
        <img src="@/assets/images/lottery/lottery-comment.png" alt="" />
        <span>{{ commentData.length }}</span>
      </div>
    </div>
    <!-- 标题 -->
    <div class="title-box" v-if="commentData.length">
      <h2>{{ '评论 ' + commentData.length }}</h2>
    </div>
    <div class="comment-item" v-for="(item, index) in commentData" :key="index">
      <!-- 直接的评论 -->
      <div class="comment-item-box">
        <div class="avatar">
          <img :src="item.user.avatar" alt="" />
        </div>
        <div class="content">
          <p>
            <span>{{ item.user.nickname + ': ' }}</span>
            <span class="content-info">{{ item.content }}</span>
          </p>
          <p class="publish-time">
            <span>{{ item.createdAt }}</span>
            <span class="reply" @click="startComment(item)">回复</span>
          </p>
        </div>
        <div class="like">
          <img
            src="@/assets/images/lottery/like-light.png"
            v-if="item.like"
            @click="likeOrDislike(item, 0)"
            alt=""
          />
          <img
            src="@/assets/images/lottery/like-light.png"
            v-else
            @click="likeOrDislike(item, 1)"
            alt=""
          />
          <p class="like-cnt">{{ item.likeCount }}</p>
        </div>
      </div>
      <!-- 下面评论的回复内容 -->
      <div class="comment-reply" v-for="(ite, ind) in item.topReplyList" :key="ind">
        <div v-if="item.limiteComment ? ind < 3 : ind < 100" class="q-comment">
          <div class="avatar">
            <img :src="ite.user.avatar" alt="" />
          </div>
          <div class="content">
            <p>
              <span>{{ ite.user.nickname }}</span>
              <span class="reply-to">{{ ' 回复 ' }}</span>
              <span>{{ ite.replyTo + ': ' }}</span>
              <span class="content-info">{{ ite.content }}</span>
            </p>
            <p class="publish-time">
              <span>{{ ite.createdAt }}</span>
              <span class="reply" @click="startComment(ite)">回复</span>
            </p>
          </div>
          <div class="like">
            <img
              src="@/assets/images/lottery/like-light.png"
              v-if="ite.like"
              @click="likeOrDislike(ite, 0)"
              alt=""
            />
            <img
              src="@/assets/images/lottery/like-light.png"
              v-else
              @click="likeOrDislike(ite, 1)"
              alt=""
            />
            <p class="like-cnt">{{ ite.likeCount }}</p>
          </div>
        </div>
      </div>
      <!-- 展开全部评论 -->
      <div
        class="show-all-comment"
        v-if="item.limiteComment ? item.replyCount > 3 : false"
        @click="showAllComment(item)"
      >
        <div class="line-box"></div>
        <span class="message">展开全部{{ ' ' + item.replyCount + ' ' }}条回复</span>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <!-- 真正的评论输入框 -->
    <van-overlay
      lock-scroll
      duration="0"
      class="real-input-comment"
      :show="isShowComment"
      @click="hideComment"
    >
      <div class="real-input-box" id="my-textarea-box">
        <textarea
          rows="3"
          v-model="commentContent"
          id="my-textarea-box"
          :placeholder="placeholderText"
        ></textarea>

        <!-- 这个不会自适应高度，vant设置了，但是没有用 -->
        <!-- <van-field
          rows="1"
          autosize
          label-width="0"
          type="textarea"
          placeholder="请输入留言"
        ></van-field> -->

        <!-- 这个不好加placeholder -->
        <!-- <div class="m-textarea" contenteditable="true">
        </div> -->
        <button @click="saveComment" :class="{ kong: commentContent ? false : true }">发 送</button>
      </div>
    </van-overlay>
  </div>
</template>
<script>
  import { Icon, Field, Button, Overlay, Toast } from 'vant';
  import mixins from 'mixins';
  export default {
    mixins: [mixins],
    components: {
      'van-icon': Icon,
      // 'van-field': Field,
      // 'van-button': Button,
      'van-overlay': Overlay,
    },
    props: {
      // lotteryData: {
      //   type: Object,
      //   default: () => {},
      // },
    },
    data() {
      return {
        commentContent: '', // 评论内容
        isShowComment: false, //是否展示评论框
        placeholderText: '请输入评论', //评论框的文案
        parentId: '', //上级评论ID
        replyUuid: '', //被回复人uuid
        commentData: [], //评论数据
        userInfoDataApp: [], //从app获取信息
        lotteryQuery: {},
        isOk: true,
        tempContext:'',
      };
    },
    created() {
      // 设置参数
      let _query = [];
      _query = window.location.href.split('?')[1].slice(3).split('-');
      this.lotteryQuery.id = _query[0] || '';
      this.lotteryQuery.uuid = _query[1] || '';
    },
    mounted() {
      // 获取评论列表
      this.init();

      // 刷新
      this.$EventBus.$on('jm:hybridActive', () => {
        // 从app获取用户信息
        this.$appService.userInfo().then((res) => {
          this.userInfoDataApp = res;
        });
      });
    },
    computed: {},
    methods: {
      // 点赞评论或者是取消点赞(0代表取消，1代表点赞)
      likeOrDislike(val, tag) {
        if (this.$userInfo.nickname || this.userInfoDataApp.nickname) {
          if (this.isOk) {
            this.isOk = false;
            this.$service
              .CmCommentLike({
                action: 1,
                commentId: val.id,
              })
              .then((res) => {
                this.isOk = true;
                val.like = !val.like;
                tag ? (val.likeCount += 1) : (val.likeCount -= 1);
              });
          }
        } else {
          this.login();
        }
      },

      // 展示全部评论
      showAllComment(item) {
        item.limiteComment = !item.limiteComment;
        this.$service
          .CmCommentReplyList({
            commentId: item.id,
            page: 1,
            size: 100,
          })
          .then((res) => {
            item.topReplyList = res.rows;
          });
      },

      // 获取评论数据
      init() {
        this.$service
          .CmCommentList({
            subjectType: 8,
            subjectId: this.lotteryQuery.id,
            page: 1,
            size: 100,
          })
          .then((res) => {
            this.commentData = res.rows;

            // 这里手动加一个字段，控制回复评论超过三个的显示与隐藏
            // 还得加一个一开始都不喜欢
            this.commentData.map((item) => {
              this.$set(item, 'limiteComment', true);
              this.$set(item, 'like', false);
              // 评论的回复也得加一下
              item.topReplyList &&
                item.topReplyList.map((i) => {
                  this.$set(i, 'like', false);
                });
            });
          });
      },

      // 隐藏评论框
      hideComment(e) {
        if (e.target.id === 'my-textarea-box') {
          return;
        } else {
          this.commentContent = '';
          this.isShowComment = false;
        }
      },

      // 发送评论
      saveComment(e) {
        if (!this.commentContent.trim()) return;
        // 暂存一下，如果包含敏感词汇会用到
        this.tempContext = this.commentContent
        this.$service
          .CmCommentPublish({
            Appid: 'jimu',
            content: this.commentContent,
            subjectType: 8,
            replyUuid: this.replyUuid,
            parentId: this.parentId,
            subjectId: this.lotteryQuery.id,
          })
          .then((res) => {
            this.commentContent = '';
            this.parentId = '';
            this.replyUuid = '';
            this.isShowComment = false;
            Toast('发表评论成功')
            // 刷新页面
            this.init();

            // // 这里是发评论要触发抽奖
            // this.$EventBus.$emit('CommentLottery','啦啦啦啦')
          }).catch(err=>{
            Toast(err.message)
            this.commentContent = this.tempContext
          });
      },

      // 评论
      startComment(item) {
        if (this.$userInfo.nickname || this.userInfoDataApp.nickname) {
          // 回复的时候一些逻辑处理
          this.placeholderText = '请输入评论'
          if (item) {
            this.placeholderText = '回复@' + item.user.nickname;
            this.parentId = item.id;
            this.replyUuid = item.user.uuid;
          }
          this.isShowComment = true;
          this.$nextTick(() => {
            let commentBoxT = document.querySelector('.real-input-box textarea');
            let commentBox = document.querySelector('.real-input-box');
            commentBoxT && commentBoxT.focus();
            // 如果是android就用app告诉我的
            if (this.$UA.isAndroid && this.$UA.isJM) {
              // 获取键盘高度
              this.$EventBus.$on('jm:setKBHeight', (val) => {
                // 会有一点点误差,先这样
                commentBox.style.marginBottom = val.data.height + 'px';
              });
            }
          });
        } else {
          this.login();
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .comment {
    margin-top: -1px;
    padding: 0rem 2rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    // 仅供展示的评论框
    .input-comment {
      margin-bottom: 3.3rem;
      height: 50px;
      width: 100%;
      background: #f3f3f3;
      border-radius: 25px;
      padding: 0rem 2.3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #111;
      .input-comment-right {
        align-items: center;
        display: flex;
        img {
          width: 23px;
          height: 23px;
        }
        span {
          margin-left: 8px;
          font-size: 12px;
        }
      }
    }
    // 真正的评论输入框
    .real-input-comment {
      .real-input-box {
        position: relative;
        background-color: #fff;
        padding: 1rem 2rem;
        position: fixed;
        // margin-top: 6.6rem;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        // /deep/ .van-cell {
        //   background-color: #f3f3f3;
        //   border-radius: 20px;
        //   width: 100%;
        //   padding: 0;
        //   &::after {
        //     display: none;
        //   }
        // }
        textarea {
          resize: none;
          width: 100%;
          background-color: #f3f3f3;
          border-radius: 20px;
          padding: 0.5rem 1rem;
          font-size: 1.4rem;
          &::-webkit-scrollbar {
            display: none;
          }
          &::placeholder {
            color: #aaa;
          }
        }
        button {
          margin-left: 2rem;
          width: 40px;
          background-color: #fff;
          color: #111;
          font-weight: 400;
          font-size: 1.4rem;
        }
        .kong {
          color: #aaa;
        }
      }
    }
    // 标题
    .title-box {
      h2 {
        display: inline-block;
        position: relative;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #111111;
        line-height: 27px;
        &::after {
          width: 100%;
          height: 11px;
          background: #888888;
          opacity: 0.1;
          content: '';
          position: absolute;
          top: 15px;
          left: 0;
        }
      }
    }

    .comment-item {
      margin: 2rem 0rem;
      overflow: hidden;
      .avatar {
        width: 30px;
        height: 30px;
        img {
          border-radius: 50%;
          width: 30px;
          height: 30px;
        }
      }
      .content {
        flex: 1;
        margin-left: 0.8rem;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #111111;
        line-height: 20px;
        .content-info {
          font-weight: 400;
        }
        .publish-time {
          margin-top: 0.7rem;
          font-size: 12px;
          color: #888888;
          font-weight: 400;
          .reply {
            margin-left: 1.4rem;
            color: #111;
          }
        }
      }
      .like {
        margin-left: 1.6rem;
        text-align: center;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        img {
          width: 19px;
          height: 21px;
        }
        .like-cnt {
          margin-top: 0.5rem;
          font-size: 1.1rem;
        }
      }
      // 直接的评论
      .comment-item-box {
        display: flex;
        justify-content: space-between;
      }
      // 下面评论的回复内容
      .comment-reply {
        margin-left: 3.8rem;
        margin-top: 2rem;
        .q-comment {
          display: flex;
          justify-content: space-between;
          .avatar {
            width: 23px;
            height: 23px;
            img {
              width: 23px;
              height: 23px;
            }
          }
          .content {
            .reply-to {
              font-weight: 400;
            }
            .publish-time {
              margin-top: 0.7rem;
            }
          }
        }
      }
      // 展开全部评论
      .show-all-comment {
        margin-left: 3.8rem;
        margin-top: 1.8rem;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #111111;
        line-height: 20px;
        .line-box {
          height: 1px;
          width: 40px;
          background-color: #888;
        }
        .message {
          margin-left: 5px;
        }
        /deep/ .van-icon {
          margin-left: 6px;
        }
      }
    }
  }
</style>
